<ion-header class="ion-no-shadow ion-no-border">
	<ion-toolbar>
		<ion-buttons slot="start">
			<ion-back-button></ion-back-button>
		</ion-buttons>
		<ion-title>{{ 'NETWORKS_PAGE.NETWORK_STATUS' | translate }}</ion-title>
	</ion-toolbar>
</ion-header>

<ion-content forceOverscroll="false" fullscreen class="ion-padding">
	<ion-grid class="h-full flex flex-col">
		<ion-row class="flex-grow">
			<ion-col>
				<ion-list inset *ngIf="currentPeer">
					<ion-item>
						<ion-label>
							<div class="item-title">
								{{ 'NETWORKS_PAGE.PEER' | translate }}
							</div>
							<div class="item-content">{{ getPeerUrl() }}</div>
						</ion-label>
					</ion-item>

					<ion-item>
						<ion-label>
							<div class="item-title">
								{{ 'NETWORKS_PAGE.HEIGHT' | translate }}
							</div>
							<div class="item-content">
								{{ currentPeer?.height | number }}
							</div>
						</ion-label>
					</ion-item>

					<ion-item>
						<ion-label>
							<div class="item-title">
								{{ 'NETWORKS_PAGE.VERSION' | translate }}
							</div>
							<div class="item-content">
								{{ currentPeer?.version }}
							</div>
						</ion-label>
					</ion-item>
				</ion-list>
			</ion-col>
		</ion-row>

		<ion-row>
			<ion-col class="text-center">
				<ion-button (click)="changePeer()"
					>{{ 'NETWORKS_PAGE.CHANGE_PEER' | translate }}</ion-button
				>
			</ion-col>
		</ion-row>
	</ion-grid>
</ion-content>
